<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>昨天作业</title>
    <style>
        .user-info {
            border-collapse: collapse;
            width: 600px;
            text-align: center;
            margin:0 auto;
        }
        .user-info tbody{
            color: rgb(240, 240, 240);
        }
        .user-info thead {
            background-color: rgb(192, 192, 192);
            color: rgb(234, 250, 195);
        }
        .user-info tbody tr:nth-child(odd){
            background-color: #1abc9c;
        }
        .user-info tbody tr:nth-child(even){
            background-color: #2ecc71;
        }
        .user-info tbody tr{
            transition: 0.3s;
        }
        .user-info tbody tr:hover{
            background-color: #3498db;
            transform: scale(1.3);
        }
    </style>
</head>

<body>

    <table class="user-info" border="1">
        <thead>
            <tr>
                <th>id</th>
                <th>name</th>
                <th>phone</th>
                <th>email</th>
                <th>age</th>
                <th>companyId</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
    <script>
        var data = [
            {
                "id": 1,
                "name": "钱秀英",
                "phone": "16153658896",
                "email": "i.swoqfifm@hcpydc.tk",
                "age": 26,
                "companyId": 4
            },
            {
                "id": 2,
                "name": "汤刚",
                "phone": "18686238114",
                "email": "v.wdprtl@vkiply.md",
                "age": 44,
                "companyId": 4
            },
            {
                "id": 3,
                "name": "薛芳",
                "phone": "16128785652",
                "email": "c.gjt@xjcvwue.mn",
                "age": 33,
                "companyId": 4
            },
            {
                "id": 4,
                "name": "魏娜",
                "phone": "18782160773",
                "email": "k.yncvnd@tblulhs.sr",
                "age": 40,
                "companyId": 4
            },
            {
                "id": 5,
                "name": "贺强",
                "phone": "17527781553",
                "email": "r.lgcgl@kyuskxku.fr",
                "age": 38,
                "companyId": 8
            },
            {
                "id": 6,
                "name": "郑丽",
                "phone": "15764758850",
                "email": "v.hpf@ytawhuhz.ev",
                "age": 22,
                "companyId": 4
            },
            {
                "id": 7,
                "name": "梁超",
                "phone": "15793616023",
                "email": "c.pdqwc@cgsneeji.nr",
                "age": 40,
                "companyId": 6
            },
            {
                "id": 8,
                "name": "袁秀英",
                "phone": "18388787880",
                "email": "g.rac@lrjcnr.at",
                "age": 25,
                "companyId": 3
            }
        ];
        var tbody = document.querySelector('.user-info tbody');
        var html = '';
        for(user of data){
            var trHtml = `<ul class="submenu">
            <tr>
                <td>${user.id}</td>
                <td>${user.name}</td>
                <td>${user.phone}</td>
                <td>${user.email}</td>
                <td>${user.age}</td>
                <td>${user.companyId}</td>
            </tr>
            `
            html += trHtml
        }
        tbody.innerHTML = html

    </script>
</body>

</html>